<template>
	<div class="wrap">
		<div class="head">
			<div class="headline">
				<span class="title">预警记录</span>
			</div>
		</div>
		<div class="body" >
			<div style="padding: 0 12px;overflow: hidden;height: 100%;">
				<table border="0" cellspacing="0" style="height: 100%;">
					<thead>
						<tr>
							<th style="width: 20%;">报警时间</th>
							<th style="width: 40%;">企业</th>
							<th style="width: 20%;">设备</th>
							<th style="width: 20%;">报警类型</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in tableData" :key="index">
							<td>{{item.time}}</td>
							<td>{{item.deptName}}</td>
							<td>{{item.deviceName}}</td>
							<td>{{item.abnormalType}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>
<script>
	import {getAbnormalBoard} from "@/api/bigScreen/bigScreen";
	export default {
		data() {
			return {
				// 酒店对油烟  其他队扬尘
				tableData: [],
				deptName:['华都酒店-油烟在线仪','同心大酒店-油烟在线仪','丹阳市永兴面粉有限公司-扬尘监测仪','合盛楼酒店-油烟在线仪','昌宏大酒店-油烟在线仪','乾侯宾馆-油烟在线仪','江苏长旺新型建材有限公司-扬尘监测仪','大亚科技股份有限公司-扬尘监测仪','中天大酒店-油烟在线仪','鼎盛大酒店-油烟在线仪','国能成安生物发电有限公司-扬尘监测仪','成安县天天碳素厂-扬尘监测仪'],
				group:['油烟在线仪','扬尘监测仪'],
				type:['超标','断线','重复值'],
				timer:null,
				timer2:null,
				allList:[],
				count:7
			}
		},
	    beforeDestroy() {
	       clearInterval(this.timer)
           clearInterval(this.timer2)
	    },		
		mounted() {
            this.init()
            let that=this
            this.timer = setInterval(this.infoControllTimer, 2000);
			this.timer2=setInterval(function(){
				clearInterval(that.timer)
				that.init()
				that.timer = setInterval(that.infoControllTimer, 2000);
			},300000)          
		},
		methods: {
			infoControllTimer(){
				this.count++
				this.tableData.shift();
				if(this.count<=this.allList.length-1){
					this.tableData.push(this.allList[this.count])
				}else{
					this.count=0
					this.tableData.push(this.allList[this.count])
				}
			},
//		    compare(property){
//			    return function(a,b){
//			        var value1 = a[property];
//			        var value2 = b[property];
//			        return value2 - value1;
//			    }
//			},			
			init(){
				getAbnormalBoard().then(res=>{
					this.allList=res.data.data
					for(var i=0;i<8;i++){
						this.tableData.push(this.allList[i])
					}					
				})				
			},
//          add0(m){return m<10?'0'+m:m },
//			formatTimer(timer)
//			{				
//				var time = new Date(timer);
//				var y = time.getFullYear();
//				var m = time.getMonth()+1;
//				var d = time.getDate();
//				var h = time.getHours();
//				var mm = time.getMinutes();
//				var s = time.getSeconds();
//				return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);
//			},			
//          createData(){
//          	let obj={}
//          	var timer=new Date().getTime()
//          	timer=timer-parseInt(Math.random()*10800000)
//          	obj.timer=timer
//          	obj.date=this.formatTimer(timer)
//          	let str=this.deptName[Math.ceil(Math.random()*12)%12]
//          	str=str.split('-')            	
//          	obj.deptName=str[0]
//          	obj.group=str[1]
//          	obj.type=this.type[Math.ceil(Math.random()*3)%3]
//          	return obj
//          }
		}
	}
</script>
<style lang="scss" scoped>
    *{box-sizing: border-box;}
	.wrap {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	
	.head {
		margin-bottom: 4px;
	}
	
	.body {
		flex: 1;
		width: 100%;
		overflow: hidden;
		table {
			width: 100%;
		}
		table thead tr th {
			color: #3591ff;
			font-size: 12px;
		}
		table tbody tr:nth-child(2n) {
			background-color: #17213d;
		}
		table tbody tr td {
			text-align: center;
			padding: 6px 0;
			color: #fff;
			font-size: 12px;
			line-height: 1.25;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	
	.headline {
		display: flex;
		color: #fff;
		.title {
			background: #131420;
			padding: 8px 15px;
			display: inline-block;
			font-size: 14px;
			box-shadow: inset 0 0 10px 0 rgba(53, 145, 255, .8);
			border: 1px solid #3591ff80;
		}
	}
</style>